<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>树状菜单</title>
		<style>
			*{
				margin:0px;
				padding: 0px;
			}
			ul,li{
				list-style:none;
			}
			#tree ul{
				display: none;
			}
			li{
				padding-left: 30px;
				cursor: pointer;
			}
			.close{
				background: url(img/close.png) no-repeat 12px 6px;
			}
			.open{
				background: url(img/open.png) no-repeat 12px 6px;
			}
		</style>
	</head>
	<body>
		<ul id="tree">
			<li>1
			<ul>
				<li>1.1
				<ul>
					<li>1.1.1
					<ul>
						<li>1.1.1.1</li>
						<li>1.1.1.2</li>
						<li>1.1.1.3</li>
					</ul>
					</li>
					<li>1.1.2
					<ul>
						<li>1.1.2.1</li>
						<li>1.1.2.2</li>
						<li>1.1.2.3</li>
					</ul>
					</li>
				</ul>
				</li>
			</ul>
			</li>
			<li>2
			<ul>
				<li>2.1
				<ul>
					<li>2.1.1
					<ul>
						<li>2.1.1.1</li>
						<li>2.1.1.2</li>
						<li>2.1.1.3</li>
					</ul>
					</li>
				</ul>
				</li>
			</ul>
			</li>
			<li>3
			<ul>
				<li>3.1
				<ul>
					<li>3.1.1
					<ul>
						<li>3.1.1.1</li>
						<li>3.1.1.2</li>
						<li>3.1.1.3</li>
					</ul>
					</li>
				</ul>
				</li>
			</ul>
			</li>
		</ul>
		<script>
			window.onload=star;
			function star(){
				var lis=tree.getElementsByTagName("li");
				for(var i=0;i<lis.length;i++){
					lis[i].className="close";
					var ulEle=lis[i].getElementsByTagName("ul")[0];
					if(!ulEle){
						lis[i].className="";
					}else{
						lis[i].onclick=function(e){
							e.stopPropagation()
							var ulEle=this.getElementsByTagName("ul")[0];
							if(ulEle.style.display=="block"){
								ulEle.style.display="none";
								this.className="close";
							}else{
								ulEle.style.display="block";
								this.className="open";
							}
						}
					}
				}
			}
		</script>
	</body>
</html>
